<template>
  <el-dialog :visible.sync="visible" fullscreen>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="约束配置">
        <el-collapse v-model="activeCollapse">
          <el-collapse-item title="教师时间偏好" name="teacher">
            <el-form label-width="120px">
              <el-form-item label="允许工作日">
                <el-checkbox-group v-model="constraints.teacher.workdays">
                  <el-checkbox label="1">周一</el-checkbox>
                  <el-checkbox label="2">周二</el-checkbox>
                  <el-checkbox label="3">周三</el-checkbox>
                  <el-checkbox label="4">周四</el-checkbox>
                  <el-checkbox label="5">周五</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="教室容量" name="classroom">
            <el-form label-width="120px">
              <el-form-item label="最小容量">
                <el-input-number v-model="constraints.classroom.minCapacity" :min="0"/>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="课程时长" name="duration">
            <el-form label-width="120px">
              <el-form-item label="单节时长">
                <el-time-picker
                  v-model="constraints.duration.singleClass"
                  value-format="HH:mm"
                  format="HH时mm分"
                />
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <!-- 其他9个约束条件折叠面板 -->
        </el-collapse>
      </el-tab-pane>
      
      <el-tab-pane label="课表调整">
        <div ref="timelineChart" style="height:600px"></div>
      </el-tab-pane>
    </el-tabs>
    
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">生成方案</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      visible: false,
      activeTab: 'constraints',
      activeCollapse: ['teacher'],
      constraints: {
        teacher: { workdays: [] },
        // 其他约束条件数据结构
      },
      ws: null
    };
  },
  methods: {
    initWebSocket() {
      this.ws = new WebSocket(`ws://${process.env.VUE_APP_WS_HOST}/schedule-ws`);
      this.ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        if(data.conflicts) {
          this.highlightConflicts(data.conflicts);
        }
      };
    },
    highlightConflicts(conflicts) {
      const option = {
        xAxis: {
          type: 'time',
          interval: 3600 * 1000 * 2,
          axisLabel: { formatter: '{HH}:00' }
        },
        yAxis: { data: ['教室A','教室B','教室C'] },
        series: [{
          type: 'scatter',
          symbolSize: 20,
          data: conflicts.map(c => ({
            value: [
              new Date(c.startTime),
              c.classroom,
              {duration: c.duration}
            ],
            itemStyle: {
              color: '#ff0000',
              shadowBlur: 10,
              shadowColor: 'rgba(255,0,0,0.3)'
            }
          }))
        }]
      };
      this.timelineChart.setOption(option);
    },
    handleConfirm() {
      this.$emit('confirm', this.constraints);
      this.visible = false;
    }
  },
  mounted() {
    this.timelineChart = echarts.init(this.$refs.timelineChart);
    this.initWebSocket();
  },
  beforeDestroy() {
    if(this.ws) this.ws.close();
  }
};
</script>